<template>
  <div>
    <h1>自定义校验表单</h1>
    <el-form :model="ruleForm" :rules="r" ref="ruleForm" label-width="100px">
      <el-form-item label="手机号" prop="phone">
        <el-input type="password" v-model="ruleForm.phone" ></el-input>
      </el-form-item>
       <el-form-item label="年龄" prop="name">
          <el-input v-model.number="ruleForm.name"></el-input>
        </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
   export default {
           name: "Form",
           data() {
               var validatePhone = (rule,value,callback)=>{ //定义自定义的验证规则
                   console.log(rule+"======");
                   console.log(value+"++++++");
                   console.log(callback+"------");
                   if(!value){
                       callback(new Error("手机号不能为空!"));
                   }
                   if(!/^1[3456789]\d{9}$/.test(value)){
                       callback(new Error("手机号码不正确!!"))
                   }
               }
              return {
                  r: { //验证规则
                      name: [ //使用默认规则
                          {required: true, message: '请输入活动名称', trigger: 'blur'},
                          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                      ],
                      phone:[  //使用自定义规则
                          {validator:validatePhone,trigger: 'blur'}
                      ]
                   },
                  ruleForm:{
                      phone:'',
                      name:'',
                    },
                }
           },
           methods: {
           }
       }
</script>

<style>
</style>
